import React from 'react';
import _ from 'underscore';
import View from 'lib/View.jsx';
import DrillScope from './DrillScope.es6';
import Card from 'lib/components/card.jsx';
import ChartWidget from 'lib/components/ChartWidget.jsx';
import GridWidget from 'lib/components/GridWidget.jsx';
import format from 'lib/util/format';
import addWidgetMixin from '../common/NewDashboardWidget.jsx'
import traceCols from './errorSimilarGridOptions.es6'

export default class RootView extends View {
  constructor(props){
    super(props);
  }
  render(){
    var title0,title1;
    if(this.scope.viewType==='domain'){
      title0 = 'HTTP 错误率'
      title1 = '网络故障率'
    }else if(this.scope.viewType==='statuscode'){
      title0 = '总错误率'
      title1 = '错误率 - 域名'
    }else if(this.scope.viewType==='errorcode'){
      title0 = '总错误率'
      title1 = '错误率 - 域名'
    }
    return (
      <div className="box">
        <div className="widget-float">
          <div className="widget-title">
            <a className="close iconfont" href="#/">&#xe638;</a>
            <h4>{this.state.title}</h4>
          </div>
          <div className="widget-content">
            <div className="pure-g">
              <div className="pure-u-1 pure-u-lg-1-2">
                <div className="box">
                  <Card title={title0} extra={
                      addWidgetMixin(this.scope.chart0Api,title0)
                    }>
                    <ChartWidget store={this.state.chart0}/>
                  </Card>
                </div>
              </div>
              <div className="pure-u-1 pure-u-lg-1-2">
                <div className="box">
                  <Card title={title1} extra={
                      addWidgetMixin(this.scope.chart1Api,title1)
                    }>
                    <ChartWidget store={this.state.chart1}/>
                  </Card>
                </div>
              </div>
            </div>
            {
              this.scope.viewType!=='errorcode'?(
                <div className="pure-g">
                  <div className="pure-u-1">
                    <div className="box">
                      <Card title="错误详情">
                        <GridWidget cols={traceCols} store={this.state.grid}/>
                      </Card>
                    </div>
                  </div>
                </div>
              ):null
            }
          </div>
        </div>
      </div>
    )
  }
}

RootView.defaultProps = {
  Scope:DrillScope
}
